import store from '@/store'
import editorware from '../../../utils/editorMiddleware'
import { marker, plane, box, ellipse } from '@/utils/publicStyle'
import { initMap } from '../../../../utils/initMap'
import cMenu from '../../../contextMenu/utils/contextMenu'
import request from '@/utils/request'
// import { map } from 'jquery'
class drawingFunction {
    constructor() {
        this.graphicLayer = '' // 当前套创建的对象的基类
        this.measure = ''
        // this.rightClickData = ''
    }

    init() {
        let that = this
        // this.graphicLayer = initMap.graphicLayer
        setTimeout(() => {
            // map.addLayer(tnat.graphicLayer)
            that.graphicLayer = initMap.graphicLayer
            that.measure = initMap.measure
            // console.log(initMap.graphicLayer)
            // console.log(map)
            map.on(mars3d.EventType.clickMap, function(e) {
                that.closeContextMenu()
                // 关闭属性对话框
                store.commit('setSingleProperty', false)
            }).on(mars3d.EventType.rightClick, function(e) {
                // console.log(e)
                that.closeContextMenu()
                // if (store.state.singleProperty) {
                //     // 关闭属性对话框
                // store.commit('setSingleProperty', false)
                // }
            })
            that.paintingCompleted()
        }, 3000)
    }

    // 绘制标注
    drawingMarker(item) {
        marker.image = item.icon
        marker.label.specification = item.name
        marker.label.text = item.name
        // console.log(marker)
        this.graphicLayer.startDraw({
            type: item.type,
            style: marker
        })
    }

    // 绘制二维平面
    drawingPlane(item) {
        // plane.outlineColor = plane.outlineColor ? plane.outlineColor : item.stick ? '#ffff00' : '#3388ff'
        plane.color = plane.color ? plane.color : item.stick ? '#ffff00' : '#3388ff'
        plane.clampToGround = item.stick
        if (item.type == 'polygon' || item.type == 'rectangle' || item.type == 'circle') {
            plane.label.text = '0 ㎡'
        } else if (item.type == 'polyline' || item.type == 'curve') {
            plane.label.text = '0 m'
            if (item.stick) {
                this.measure.distance({
                    showAddText: true
                })
            } else {
                this.measure.distanceSurface({
                    showAddText: true
                })
            }
        }
        // console.log(plane)
        this.graphicLayer.startDraw({
            type: item.type,
            style: plane
        })
    }

    // 绘制三维立体
    drawingStereoscopic(item) {
        let style = {}
        if (item.type == 'box') {
            box.color = item.color
            style = box
        } else if (item.type == 'ellipse') {
            ellipse.color = item.color
            style = ellipse
        }
        this.graphicLayer.startDraw({
            type: item.type,
            style: style
        })
    }

    // 监听绘画
    paintingCompleted() {
        let that = this
        // console.log(this, 123)
        initMap.graphicLayer
            .on(mars3d.EventType.drawCreated, function(e) {
                // console.log('创建完成', e)
                // editorware.isFlyTo = true
                // 清除空间测量
                that.measure.clear()
                store.commit('setSingleProperty', false)
                let objData = e.graphic
                console.log(objData)
                // console.log(objData.options.style, '创建完成')
                // debugger
                objData.name = `${objData.type}#${editorware.coverageMap.size}`
                // 设置显示面积或者长度，单位m
                if (objData.type == 'polyline' || objData.type == 'curve') {
                    // 线或者曲线显示长度
                    let distance = objData.distance.toFixed(2)
                    //  Math.ceil(Number(objData.distance) * (100 / 100))
                    // setTimeout(() => {
                    objData.setStyle({
                        zIndex: editorware.coverageMap.size,
                        label: {
                            text: `${distance} m`,
                            color: objData.style.color,
                            opacity: 1
                        }
                    })
                    // objData。
                    // }, 300)
                } else if (objData.type == 'polygon' || objData.type == 'rectangle' || objData.type == 'circle') {
                    // 多边形、矩形、圆显示面积
                    let area = objData.area.toFixed(2)
                    // 为多边形的时候显示倾斜面积
                    if (objData.type == 'polygon') {
                        area = Math.ceil(Number(objData.area) * (100 / 100))
                        // objData.area = area
                    }
                    // console.log(objData.style.color)
                    if (!objData.style.outlineColor) {
                        objData.setStyle({ outlineColor: objData.style.color })
                    }
                    // objData.setStyle({ outlineColor: objData.style.color })
                    // objData.options.style.label.text = `${area} ㎡`
                    // setTimeout(() => {
                    objData.setStyle({ zIndex: editorware.coverageMap.size, label: { text: `${area} ㎡`, opacity: 1 } })
                    // }, 300)
                }
                // objData.setStyle({outlineColor: this.getStyle.})
                // objData.zIndex = editorware.coverageMap.size
                // 添加数据到数据库
                let addData = objData.toJSON()
                addData.name = `${objData.type}#${editorware.coverageMap.size}`
                addData.pid = editorware.drawingId
                addData.style.area = Math.ceil(Number(objData.area) * (100 / 100))
                addData.style.distance = Math.ceil(Number(objData.distance) * (100 / 100))
                addData.style.radius = objData.radius
                // addData.style.materialType = 'Color'
                // console.log(addData, '-------------------------------------------')
                request
                    .postForm('/api/map/draw/addDrawingBinding', {
                        drawQueryString: JSON.stringify(addData)
                    })
                    .then(res => {
                        if (res.code == 200) {
                            // let resData = {}
                            objData.id = res.data.id
                            editorware.coverageMap.set(res.data.id, objData)
                            // 通知图层组件新增了图层对象
                            editorware.addCoverageObj(res.data)
                        }
                    })
                editorware.isBeEditor = false
            })
            .on(mars3d.EventType.drawStart, function(e) {
                // console.log('开始绘制', e)
                // console.log(plane)
                editorware.isFlyTo = false
                editorware.isBeEditor = true
                store.commit('setSingleProperty', false)
                let objData = e.graphic
                request
                    .get('/api/map/draw/queryTheLastModifiedStyle', {
                        baseId: sessionStorage.getItem('baseId'),
                        drawType: objData.type
                    })
                    .then(res => {
                        if (res.code == 200 && objData.type != 'billboard') {
                            // this.getStyle = res.data.style
                            // console.log(res)
                            if (res.data.style) {
                                objData.setStyle(res.data.style)
                            }

                            // if (objData.type != 'polyline' || objData.type != 'curve') {
                            //     objData.setStyle({ materialType: 'Color' })
                            // }
                            // if (objData.type == 'polygon' || objData.type == 'rectangle' || objData.type == 'circle') {
                            //     objData.setStyle({ zIndex: editorware.coverageMap.size, label: { text: '0 ㎡', opacity: 1 } })
                            // }
                        }
                    })
            })
            .on(mars3d.EventType.drawAddPoint, function(e) {
                // console.log('绘制过程中增加了点', e)
                store.commit('setSingleProperty', false)
            })
            .on(mars3d.EventType.drawRemovePoint, function(e) {
                // console.log('绘制过程中删除了点', e)

                store.commit('setSingleProperty', false)
                // store.commit('setContextMenu', { show: false })
            })
            .on(mars3d.EventType.editMovePoint, function(e) {
                // console.log('编辑修改了点', e.graphic)
                postGraphic(e.graphic)
            })
            .on(mars3d.EventType.editRemovePoint, function(e) {
                // console.log('删除了点', e)
                // let objData = e.graphic
                postGraphic(e.graphic)
            })
            .on(mars3d.EventType.editStart, function(e) {
                // console.log('开始编辑 ', e)
                // console.log(e)
                // store.commit('setSingleProperty', false)
            })
            .on(mars3d.EventType.rightClick, function(a) {
                // 绑定右键事件
                // a.stopPropagation()
                // console.log(a)
                // store.commit('setSingleProperty', false)
                editorware.isFlyTo = false
                if (!store.state.singleProperty) {
                    let graphic = editorware.rightClickData
                    if (graphic && graphic.id) {
                        graphic.stopEditing()
                    }
                    const commitData = {
                        isShow: true,
                        X: a.position.x,
                        Y: a.position.y,
                        type1: 'layerMenu',
                        type2: 'layer',
                        time: new Date().getTime()
                    }
                    let islockNode = editorware.treeObj.getNode(a.graphic.id).parent.data
                    console.log(islockNode)
                    if (islockNode.isLocked == 0) {
                        store.commit('setContextMenu', commitData)
                    }
                    editorware.rightClickData = a.graphic
                }
            })
            .on(mars3d.EventType.click, function(a) {
                // 绑定点击事件
                // console.log('单击图层对象')
                editorware.isFlyTo = false
                if (!editorware.isBeEditor) {
                    let graphic = editorware.rightClickData
                    // console.log(graphic)
                    // return
                    if (graphic && graphic.id && graphic.type != 'tif') {
                        graphic.stopEditing()
                    }
                    // if (a.graphic.type != 'polyline' || a.graphic.type != 'curve') {
                    //     a.graphic.setStyle({ materialType: 'Color' })
                    // }
                    editorware.rightClickData = a.graphic
                    editorware.treeObj.setCurrentKey(a.graphic.id)
                    unfold(editorware.treeObj.getNode(a.graphic.id))
                    store.commit('setContextMenu', { show: false })
                    cMenu.property()
                }
            })
    }

    // 监听地图的单击和右击事件关闭右键菜单
    closeContextMenu() {
        const date = new Date().getTime()
        if (date - store.state.contextMenu.time >= 100 && store.state.contextMenu.isShow) {
            const commitData = {
                isShow: false
            }
            store.commit('setContextMenu', commitData)
        }
    }
}
const drawing = new drawingFunction()
export default drawing
/**
 *
 * @param {*} objData 编辑修改了图层点向后台提交数据
 */
function postGraphic(objData) {
    if (objData.type == 'polyline' || objData.type == 'curve') {
        // 线或者曲线显示长度
        // let distance = parseInt((objData.distance * (100 / 100)) / 10) * 10
        let distance = Math.ceil(Number(objData.distance) * (100 / 100))
        objData.setStyle({ zIndex: editorware.coverageMap.size, label: { text: `${distance} m`, opacity: 1 } })
        objData.options.style.distance = objData.area
    } else if (objData.type == 'polygon' || objData.type == 'rectangle' || objData.type == 'circle') {
        // 多边形、矩形、圆显示面积
        let area = objData.area.toFixed(2)
        // 为多边形的时候显示倾斜面积
        if (objData.type == 'polygon') {
            // area = parseInt((objData.area * (100 / 100)) / 10) * 10
            area = Math.ceil(Number(objData.area) * (100 / 100))
        }
        objData.setStyle({ zIndex: editorware.coverageMap.size, label: { text: `${area} ㎡`, opacity: 1 } })
        objData.options.style.area = objData.area
        objData.options.style.area1 = objData.area
    }
    store.state.editMovePoint = objData.toJSON()
}
function unfold(node) {
    if (node) {
        if (node.level && node.level > 1) {
            node.parent.expanded = true
            unfold(node.parent)
        } else if (node.level == 1) {
            node.expanded = true
        }
    }
}
